<template>
	<view class="list-left">
		<!-- <view class="author" @click="open">
			<view class="left">
				<image src="../../static/images/car_href.png"></image>
				<view class="hint">购物</view>
			</view>
			<view class="name">{{goods_name}}</view>
		</view> -->
		<view class="title">
		@{{video.shop_name}}
		· {{video.create_time}}
		</view>
		<view class="music-box">
			<view class="music">
				{{video.describe}}
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_name: '',
				videoDesc: '',
				shop_name:'',
				author: '',
				name: '',
				id: '',
				goodsList:[]
			}
		},
		props: ['video'],
		mounted() {
			this.id = this.video.id
			this.shop_name = this.video.shop_name
			this.goods_name = this.video.goods_name
			this.circle_name = this.video.circle_name
		},
		methods:{
			open(){
				if(this.goodsList.length == 0){
					uni.showLoading({
						title:"请求中"
					})
					this.$http.Videogoodlist({
						video_id: this.id
					}).then(res=>{
						console.log(res)
						if(res.status == 200){
							this.goodsList = res.data
							uni.hideTabBar()
							this.$refs.tel.open()
							this.$emit('openShowcase')
						}else{
							wx.showToast({
								title: res.mess,
								mask:true,
								duration:1500
							})
						}
					}).catch(err=>{
						wx.showToast({
							title: '服务器错误',
							mask:true,
							icon:'none',
							duration:1500
						})
					})
								
				}else{
					uni.hideTabBar()
					this.$refs.tel.open()
					this.$emit('openShowcase')
				}
			
			},
			close(){
				uni.showTabBar()
				this.$refs.tel.close()
				this.$emit('openShowcase')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-left {
		width: 70%;
		height: 240rpx;
		color: white;	
		margin-bottom: 00rpx;
	}

	.author {
		height: 66rpx;
		line-height: 66rpx;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		max-width: 400rpx;
		height: 50rpx;
		background-color: rgba($color: #000000, $alpha: 0.3);
		border-radius: 10rpx;
		.left{
			display: flex;
			align-items: center;
			width: 150rpx; 
		}
		.name{
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 220rpx;
			white-space: nowrap;
		}
		image{
			width: 36rpx;
			height: 36rpx;
			margin: 0 15rpx;
		}
	}

	.title {
		width: 420rpx;
		line-height: 80rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-weight: bold;
		color: #FFFAF0;
	}

	.music-box {
		overflow: hidden;
		width: 70%;
	}

	.music {
		width: 500rpx;
		// height: 66rpx;
		// line-height: 66rpx;
		font-size: 28rpx;
		// animation: scroll-x 8s linear 0.2s infinite;
	}

	@keyframes scroll-x {
		0% {
			transform: translate3d(60%, 0, 0);
		}

		100% {
			transform: translate3d(-60%, 0, 0);
		}
	}
</style>
